<!DOCTYPE HTML>
<html>
<script src="../../resources/ahem.js"></script>
<head>
    <title></title>
    <style type="text/css">
        button { font-family: Ahem; }
        button.bef:before { content:'before'; }
        button.aft:after { content:'after'; }
        button.bef1:before { content:'BEFORE'; }
        button.aft1:after { content:'AFTER'; }
    </style>
    <script type="text/javascript">
        function test()
        {
            // force layout
            document.body.offsetTop;
            // change style, forcing generated content to update
            document.getElementById("a").style.color = "blue";
            document.getElementById("b").style.color = "blue";
            document.getElementById("c").style.color = "blue";
            document.getElementById("d").style.color = "blue";
            // remove generated content
            document.getElementById("e").className = "";
            document.getElementById("f").className = "";
            document.getElementById("g").className = "";
            document.getElementById("h").className = "";
            // add generated content
            document.getElementById("i").className = "bef";
            document.getElementById("j").className = "bef";
            document.getElementById("k").className = "aft";
            document.getElementById("l").className = "aft";
            // replace generated content
            document.getElementById("m").className = "bef";
            document.getElementById("n").className = "bef";
            document.getElementById("o").className = "aft";
            document.getElementById("p").className = "aft";
        }
    </script>
</head>
<body onload="test();">
    <p>
        This is a test of generated content in &lt;button>  for
        <i><a href="https://bugs.webkit.org/show_bug.cgi?id=9561">http://bugzilla.opendarwin.org/show_bug.cgi?id=9561</a>
        REGRESSION: Content property on :before of button causes hang on click or hover</i>.
    </p>
    <hr>
    <button id="a" class="bef"></button>
    <button id="b" class="bef">button</button>
    <br>
    <button id="c" class="aft"></button>
    <button id="d" class="aft">button</button>
    <br>
    <button id="e" class="bef"></button>
    <button id="f" class="bef">button</button>
    <br>
    <button id="g" class="aft"></button>
    <button id="h" class="aft">button</button>
    <br>
    <button id="i"></button>
    <button id="j">button</button>
    <br>
    <button id="k"></button>
    <button id="l">button</button>
    <br>
    <button id="m" class="bef1"></button>
    <button id="n" class="bef1">button</button>
    <br>
    <button id="o" class="aft1"></button>
    <button id="p" class="aft1">button</button>
    <br>
</body>
</html>
